<template>
	<view class="jubao">
		<u-navbar title="举报" :border-bottom="false" back-icon-color="#ffffff" title-color="#fff" :background="{backgroundColor:'#2A2931'}"></u-navbar>
		<view class="view">
			<view class="top flex">
				<view class="head img-w"><image mode="aspectFill" :src="userinfo.head_300 | formatImage"></view>
				<view class="base_info">
					<view class="userName">{{userinfo.name}}</view>
					<view class="info"><text id="sex">{{userinfo.sex}}</text>,{{userinfo.age}}岁
					</view>
				</view>
			</view>
			<view class="desc">
				<u-field
					v-model="mobile"
					placeholder="请输入你电话"
					label-width="0"
					type="tel"
					:border-bottom="false"
				>
				</u-field>
				<u-cell-item :title-style="{color:'#ccc'}" :border-bottom="false" :title="pdesc" @click="descshow = true" hover-class="none"></u-cell-item>
				<u-field
					v-model="desc"
					placeholder="详细说明举报内容吧"
					type="textarea"
					label-width="0"
					:border-bottom="false"
				>
				</u-field>
			</view>
			<view class="imagesfile">
				<view class="label">相关截图</view>
				<u-upload ref="Upload" name="image" :form-data="formdata" @on-choose-complete="picchoose" @on-uploaded="picupload" :action="action" :auto-upload="false"></u-upload>
			</view>
		</view>
		<button class="new-btn" @click="submit">提交</button>
		<u-action-sheet @click="descclick" :list="list" v-model="descshow"></u-action-sheet>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				desc:'',
				mobile:'',
				descshow:false,
				list: [{
					text: '骗子'
				}, {
					text: '发广告' 
				}],
				pdesc:'发广告',
				action: this.$HOSTURL + '/api/Tool/imagesUpload',
				formdata:{
					water: 1,
					thumb: 1,
					user_id: this.$store.state.userid
				},
				userinfo: {},
				imgnum: 0
			}
		},
		onLoad(options) {
			this.uid = options.uid
			this.getReason()
			this.getuserinfo()
		},
		methods: {
			async getReason() {
				const {data:res} = await this.$Request({
					url:'api/user/reportSelected'
				})
				if (res && res.code == 200) {
					for(var i = 0;i < res.result.length;i++){
						var obj = res.result[i];
						for(var key in obj){
							if(key == 'value'){
								obj['text'] = obj[key];
								delete obj[key];
							}
						}
					}
					this.list = res.result;
					if (res.result.length > 0) {
						this.resoneid = res.result[0].id;
						this.pdesc = res.result[0].text
					}
				}
			},
			async getuserinfo() {
				const {
					data: res
				} = await this.$Request({
					url: 'api/user/info',
					data: {
						longitude: this.$store.state.longitude,
						latitude: this.$store.state.latitude,
						user_id: this.uid,
						to_user: this.$store.state.userid
					}
				})
				this.userinfo = res.result
			},
			descclick(index){
				console.log(`点击了第${index + 1}项，内容为：${this.list[index].text}`)
				this.pdesc = this.list[index].text
				this.resoneid = this.list[index].id
			},
			submit() {
				if (!this.desc) return this.$u.toast('详细说明未填写')
				if (!/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(this.mobile)) return this.$u.toast('手机号码不正确')
				if (this.imgnum == 0) {
					this.req()
				} else {
					this.$refs.Upload.upload()
				}
			},
			picchoose(lists, name){
				this.imgnum = lists.length
			},
			picupload(lists, name){
				var obj = []
				for(var i = 0; i < lists.length; i++){
					obj.push(lists[i].response.data.image)
				}
				this.req(obj.join(','))
			},
			async req(img){
				var param = {
					desc: this.desc,
					phone: this.mobile,
					type: 1,
					report_user: this.uid, //被举报人id
					user_id: this.$store.state.userid,
					report_selected_id: this.resoneid,
				}
				if(img){
					param.report_picture = img
				}
				const {data:res} = await this.$Request({
					url: 'api/user/reportUser',
					data: param
				})
				this.$u.toast(res.code == 200 ? '举报信息已提交，等待平台处理' : res.msg);
				if (res && res.code == 200) {
					setTimeout(()=>{
						uni.navigateBack()
					},1500)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.jubao{
		background-color: #2A2931;
		min-height: 100vh;
		
		.top{
			display: flex;
			padding: 30rpx 20rpx;
			margin-top: 20rpx;
			.head{
				width: 160rpx;
				height: 160rpx;
				position: relative;
				border-radius: 14rpx;
				overflow: hidden;
				margin-right: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				image{
					width: 160rpx;
					height: 160rpx;
				}
			}
			.base_info {
				float: right;
				width: 72%;
				padding: 26rpx 0;
				line-height: 50rpx;
				.userName{
					color: #fff;
				}
				.info{
					color: #888;
				}
			}
		}
		.desc{
			.u-field{
				color: #fff;
			}
		}
		.imagesfile{
			padding: 0 24rpx;
			.label{
				padding: 20rpx 6rpx;
				color: #fff;
			}
		}
	}
</style>
